<template>
  <div class="group-send">
    <LiveOverview :tabs="tabs" @refresh="refresh" />

    <div class="mt-20 mb-20">
      <SearchForm
        v-model="formOption.data"
        :formOption="formOption"
        :btn-list="btnList"
        :show-btn="true"
        label-width="90px"
      />
    </div>

    <div class="add-text-message">
      <el-alert
        title="教育、医疗、酒类、引导加微信容易被运营商屏蔽，请谨慎发送"
        type="warning"
        show-icon
      >
      </el-alert>
      <el-button type="primary" class="mt-20 mb-20" @click="addGroupMessage">
        新建短信群发
      </el-button>
    </div>

    <PageTable :loading="loading" :columns="columns" :data="dataSource" />

    <Pagination
      v-show="total > 0"
      :total="total"
      :pageNo.sync="listQuery.pageNo"
      :pageSize.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { export2Excel } from '@/utils/export'
import { MESSAGE_SEND_OBJECT } from '@/enum/message'
import { useFilterSingleStatistics } from '@/hooks'
export default {
  name: 'GroupSend',
  data() {
    return {
      loading: true,
      formOption: {
        data: {},
        items: [
          {
            type: 'daterange',
            label: '筛选日期',
            value: 'time',
            valueFormat: 'yyyy-MM-dd'
          }
        ]
      },
      btnList: [
        {
          type: 'primary',
          label: '筛选',
          onClick: () => {
            this.listQuery.pageNo = 1
            this.getList()
          }
        },
        {
          label: '导出',
          onClick: () => {
            this.exportFile()
          }
        }
      ],
      total: 10,
      listQuery: {
        pageNo: 1,
        pageSize: 10
      },
      columns: [
        {
          label: '短信内容',
          prop: 'content'
        },
        {
          prop: 'sendObject',
          label: '发送对象',
          render: (h, { row }) => {
            return <span>{this.MESSAGE_SEND_OBJECT[row.sendObject]}</span>
          }
        },
        {
          label: '发送时间',
          prop: 'sendTime'
        },
        {
          prop: 'isSucceed',
          label: '发送状态',
          render: (h, { row }) => {
            let flag = typeof row.isSucceed === 'object'
            return <span>{flag ? '待发送' : row.isSucceed ? '成功' : '失败'}</span>
          }
        },
        {
          label: '发送短信人数',
          prop: 'sendPeopleNum'
        },
        {
          label: '发送短信总数',
          prop: 'sendNum'
        },
        {
          prop: 'successNum',
          label: '成功/失败',
          render: (h, { row }) => {
            return (
              <div>
                <span>{row.successNum}</span>
                <span>/</span>
                <span style={'color: #fc4541'}>{row.errNum}</span>
              </div>
            )
          }
        },
        {
          label: '操作',
          render: (h, { row }) => {
            return (
              <el-button type="text" onClick={() => this.seeMessageDetail(row.id)}>
                查看明细
              </el-button>
            )
          }
        }
      ],
      dataSource: [],
      tabs: [
        {
          isShow: true,
          baseData: {
            key: 'sum',
            label: '历史发送总数',
            value: ''
          },
          yesterdayData: {
            isShow: true,
            key: 'yesterday',
            value: '',
            mark: {
              isShow: true,
              text: '+'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'succeed',
            label: '发送成功',
            value: ''
          },
          yesterdayData: {
            isShow: true,
            key: 'yesterdaySucceed',
            value: '',
            mark: {
              isShow: true,
              text: '+'
            }
          }
        },
        {
          isShow: true,
          baseData: {
            key: 'err',
            label: '发送失败',
            value: ''
          },
          yesterdayData: {
            isShow: true,
            key: 'yesterdayErr',
            value: '',
            mark: {
              isShow: true,
              text: '+'
            }
          }
        }
      ]
    }
  },
  computed: {
    MESSAGE_SEND_OBJECT() {
      return MESSAGE_SEND_OBJECT
    }
  },
  created() {
    this.getCashCount()
    this.getList()
  },
  mounted() {},
  methods: {
    // 获取实时概况数据
    async getCashCount() {
      const { data } = await this.$http.message.massApi.smsSendStatistics()
      this.getRealTimeConfig(data)
    },
    // 刷新实时概况数据
    refresh() {
      this.getCashCount()
      this.$message.success('更新成功')
    },
    // 获取实时数据配置
    getRealTimeConfig(data) {
      this.tabs = useFilterSingleStatistics(this.tabs, data)
    },
    //  获取列表
    async getList() {
      const params = {
        ...this.listQuery
      }
      const { time } = this.formOption.data
      if (time) params.startTime = time[0]
      if (time) params.endTime = time[1]
      const {
        data: { list, total }
      } = await this.$http.message.massApi.getList({ params })
      this.total = total
      this.dataSource = list
      this.loading = false
    },
    addGroupMessage() {
      this.$router.push({ name: 'AddGroup' })
    },
    seeMessageDetail(id) {
      this.$router.push({ name: 'MessageDetail', query: { id } })
    },
    // 导出
    async exportFile() {
      const headerData = this.columns.filter(item => item.prop).map(item => item.label)
      const filterData = this.columns.filter(item => item.prop).map(item => item.prop)
      const list = this.$lodash.cloneDeep(this.dataSource)
      const tableData = list.map(item => {
        item.sendScope = item.sendScope === '' ? '全国' : '指定区域'
        item.sendObject = this.MESSAGE_SEND_OBJECT[item.sendObject]
        item.isSucceed = item.isSucceed ? '成功' : '失败'
        item.successNum = `${item.successNum}/${item.errNum}`
        return item
      })
      export2Excel(headerData, tableData, filterData, '短信群发', () => {
        this.$message.success('导出成功')
      })
    }
  }
}
</script>

<style lang="scss" scoped></style>
